<template>
  <div class="app-container">
    <div class="timeLine" style="overflow: hidden">
      <div class="ul_box">
        <div class="my_timeline" ref="mytimeline" style="margin-left: 10px">
          <div class="my_timeline_item" v-for="(item, index) in props.list" :key="index">
            <!--圈圈节点-->
            <div :style="{
              position: index === props.list.length - 1 ? 'relative' : '',
              top: index === props.list.length - 1 ? '-4px' : '',
            }" class="my_timeline_node" :class="{
  curr: item.is_ok === 1,
}"></div>
            <!--线-->
            <div class="my_timeline_item_line" v-if="index !== props.list.length - 1"></div>
            <!--标注-->
            <div class="my_timeline_item_content">
              <span>{{ item.title }}</span>
              <span>{{ item.content }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  list: {
    type: Array,
    default: [],
  },
});
</script>

<style lang="scss" scoped>
.app-container {
  display: flex;
  width: 100%;
  justify-content: center;

  .timeLine {
    display: flex;
    justify-content: center;

    .ul_box {
      display: inline-block;
      margin: 10px 2px;
      overflow: hidden;

      .my_timeline_item {
        display: inline-block;
        width: 180px;

        .curr {
          background: #467ae9 !important;
        }
      }

      .my_timeline_node {
        width: 10px;
        height: 10px;
        background: #969696;
        box-sizing: border-box;
        border-radius: 50%;
      }

      .my_timeline_item_line {
        width: 170px;
        height: 10px;
        margin: -6px 0 0 10px;
        border-top: 2px solid #e4e7ed;
        border-left: none;
      }

      .my_timeline_item_content {
        margin: 10px 0 0 -10px;
        display: flex;
        flex-flow: column;
        cursor: pointer;
      }
    }
  }
}
</style>
